import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:short_drama/models/drama_model.dart';
import 'package:short_drama/pages/detail/detail.dart';
import 'package:short_drama/pages/home/home_list/home_list_viewmodel.dart';

class HomeListPage extends StatefulWidget {
  final String dramaType;

  const HomeListPage(this.dramaType, {super.key});

  @override
  State<HomeListPage> createState() => _HomeListPageState();
}

class _HomeListPageState extends State<HomeListPage> {
  final RefreshController _controller = RefreshController();
  final HomeListViewmodel viewmodel = HomeListViewmodel();

  @override
  void initState() {
    super.initState();
    viewmodel.dramaType = widget.dramaType;
    firstRefresh();
  }

  firstRefresh() async {
    EasyLoading.show(status: 'loading', maskType: EasyLoadingMaskType.clear);
    await viewmodel.queryRefresh();
    EasyLoading.dismiss();
  }

  @override
  Widget build(BuildContext context) {
    return _waterFlow();
  }

  Widget _waterFlow() {
    return SmartRefresher(
      controller: _controller,
      header: const ClassicHeader(),
      enablePullUp: true,
      onRefresh: () async {
        await viewmodel.queryRefresh();
        _controller.refreshCompleted();
      },
      onLoading: () async {
        await viewmodel.queryLoadMore();
        _controller.loadComplete();
      },
      child: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.only(bottom: 24, left: 16, right: 16),
            sliver: Obx(
                  () =>
                  SliverGrid(
                    delegate: SliverChildBuilderDelegate((BuildContext context,
                        int index,) {
                      return GestureDetector(
                        onTap: () {
                          DramaModel drama = viewmodel
                              .dramas[index] as DramaModel;
                          Get.to(() => DetailPage('${drama.drama_id ?? 0}'));
                        },
                        child: _cardItem(viewmodel.dramas[index]),
                      );
                    }, childCount: viewmodel.dramas.length),
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing: 16,
                      crossAxisSpacing: 16,
                      childAspectRatio: 0.62,
                    ),
                  ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _cardItem(DramaModel drama) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(4),
      child: Container(
        color: Color.fromARGB(13, 255, 255, 255),
        child: Column(
          children: [
            Expanded(
              child: Image.network(
                drama.drama_image ?? '',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(12),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    drama.drama_name ?? '',
                    style: TextStyle(color: Colors.white, fontSize: 15),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 6, bottom: 6),
                    child: Text(
                      drama.end_time ?? '',
                      style: TextStyle(
                        color: Color.fromARGB(153, 255, 255, 255),
                        fontSize: 12,
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(bottom: 6),
                    child: Text(
                      (drama.stock ?? 0) > 0 ? '活动中':'',
                      style: TextStyle(
                        color: Color.fromARGB(153, 255, 255, 255),
                        fontSize: 12,
                      ),
                    ),
                  ),
                  Row(
                    children: [
                      Image.asset(
                        'assets/images/icon_home_list_coin.png',
                        width: 13,
                        height: 13,
                      ),
                      SizedBox(width: 4),
                      Text(
                        drama.point ?? '',
                        style: TextStyle(
                          color: Color(0xfffbb11b),
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
